<template>
  <div class="list">
    <el-card class="box-card1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small" label-width="100px">
        <el-form-item label="使用单位">
          <el-input v-model="formInline.useOrgName"></el-input>
        </el-form-item>
        <el-form-item label="设备注册代码">
          <el-input v-model="formInline.eleCode"></el-input>
        </el-form-item>
        <el-form-item label="计划开始时间">
          <el-date-picker v-model="formInline.startTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="计划结束时间">
          <el-date-picker v-model="formInline.endTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="维保负责人">
          <el-input v-model="formInline.maintWorker"></el-input>
        </el-form-item>
        <el-form-item label="维保类型">
          <el-select v-model="formInline.maintType" placeholder="请选择" clearable>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否逾期">
          <el-select v-model="formInline.isOver" placeholder="请选择" clearable>
            <el-option v-for="item in overs" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="gettableData" size="small">查询</el-button>
          <el-button @click="onexport" size="small">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top:15px">
      <div slot="header" class="clearfix">
        <div style="display: flex;justify-content: space-between;align-items: center;">
          <p>工单总数:<span style="color:red;margin:0 5px">{{taskTotal}}</span> 使用单位数量:<span style="color:red;margin:0 5px">{{useOrgTotal}}</span></p>
        </div>

      </div>
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{
      fontWeight:800}" :row-class-name="tableRowClassName">
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column label="设备注册代码" width="190">
          <template slot-scope="scope">
            <el-button type="text" @click="showDetail(scope.row.taskId)">
              {{scope.row.eleCode}}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="planName" label="计划名称">
        </el-table-column>
        <el-table-column prop="useOrgName" label="使用单位">
        </el-table-column>
        <el-table-column prop="startTime" label="计划维保时间">
        </el-table-column>
        <el-table-column prop="maintType" label="维保类型">
        </el-table-column>
        <el-table-column prop="maintWorker" label="维保负责人">
        </el-table-column>
        <el-table-column prop="phonenumber" label="联系电话">
        </el-table-column>
        <el-table-column prop="exceedingOrExpectingDay" label="逾/预期">
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
        :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
      </el-pagination>
    </el-card>
    <el-dialog title="保养工单详情" :visible.sync="dialogVisible" :before-close="handleClose" width="80%">
      <div>
        <h1>基本详情</h1>
        <el-form :model="eleMaintTaskBaseInfo" :inline='true'>
          <el-form-item label="计划名称" label-width="100px">
            <el-input v-model="eleMaintTaskBaseInfo.planName" autocomplete="off" size='small' readonly></el-input>
          </el-form-item>
          <el-form-item label="计划开始时间" label-width="100px">
            <el-input v-model="eleMaintTaskBaseInfo.planStartTime" autocomplete="off" size='small' readonly></el-input>
          </el-form-item>
          <el-form-item label="使用单位名称" label-width="100px">
            <el-input v-model="eleMaintTaskBaseInfo.orgUseName" autocomplete="off" size='small' readonly></el-input>
          </el-form-item>
          <el-form-item label="设备地址" label-width="100px">
            <el-input v-model="eleMaintTaskBaseInfo.eleUseCommunity" autocomplete="off" size='small' readonly></el-input>
          </el-form-item>
          <el-form-item label="维保负责人" label-width="100px">
            <el-input v-model="eleMaintTaskBaseInfo.maintWorkerCharge" autocomplete="off" size='small' readonly></el-input>
          </el-form-item>
          <el-form-item label="电话" label-width="100px">
            <el-input v-model="eleMaintTaskBaseInfo.phonenumber" autocomplete="off" size='small' readonly></el-input>
          </el-form-item>
          <el-form-item label="当前状态" label-width="100px">
            <el-input v-model="eleMaintTaskBaseInfo.maintTaskStatus" autocomplete="off" size='small' readonly></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <h1>工单处理流程</h1>
        <div class="steps">
          <el-steps :active="active" finish-status="success" align-center :space="300">
            <el-step title="新建计划">
              <template slot="description" v-if="flowList[0]">
                <p>{{flowList[0].createBy}}</p>
                <p>{{flowList[0].finishTime}}</p>
              </template>
            </el-step>
            <el-step title="已派单">
              <template slot="description" v-if="flowList[1]">
                <p>{{flowList[1].createBy}}</p>
                <p>{{flowList[1].finishTime}}</p>
              </template>
            </el-step>
            <el-step title="到达现场">
              <template slot="description" v-if="flowList[2]">
                <p>{{flowList[2].createBy}}</p>
                <p>{{flowList[2].finishTime}}</p>
              </template>
            </el-step>
            <el-step title="保养结束">
              <template slot="description" v-if="flowList[3]">
                <p>{{flowList[3].createBy}}</p>
                <p>{{flowList[3].finishTime}}</p>
              </template>
            </el-step>
            <el-step title="服务评定">
              <template slot="description" v-if="flowList[4]">
                <p>{{flowList[4].createBy}}</p>
                <p>{{flowList[4].finishTime}}</p>
              </template>
            </el-step>
            <el-step title="完成">
              <template slot="description" v-if="flowList[5]">
                <p>{{flowList[5].createBy}}</p>
                <p>{{flowList[5].finishTime}}</p>
              </template>
            </el-step>
          </el-steps>
        </div>
      </div>
      <!-- <div>
        <p style="font-weight:800">处理结果说明 √：正常； x：未处理；△：已处理并更换零件； -：无此项</p>
        <h1>保养项目信息</h1>
        <el-table :data="tableData" style="width: 100%;margin-top:10px" :header-cell-style="{
      fontWeight:800}">
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column label="保养周期" prop="name">
          </el-table-column>
          <el-table-column prop="name" label="保养项目">
          </el-table-column>
          <el-table-column prop="address" label="保养位置">
          </el-table-column>
          <el-table-column prop="address" label="基本要求">
          </el-table-column>
          <el-table-column prop="address" label="检查图片">
          </el-table-column>
          <el-table-column prop="address" label="检查结论">
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
          :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
        </el-pagination>
      </div> -->
    </el-dialog>
  </div>

</template>

<script>
import { getAdminselectEleMaintTaskPage, getselectEleMaintTaskDetail } from '@/api/work'
import excel from '@/views/export/excel.js'
export default {
  components: {

  },
  data () {
    return {
      active: null,
      taskTotal: '',
      useOrgTotal: '',
      value: '',
      overs:[
        {
          value: '0',
          label: '未逾期'
        },
        {
          value: '1',
          label: '已逾期'
        },
      ],
      options: [
        {
          value: 10,
          label: '半月保'
        },
        {
          value: 11,
          label: '季度保'
        },
        {
          value: 12,
          label: '半年保'
        },

        {
          value: 13,
          label: '年保'
        },
        {
          value: 14,
          label: '按需维保'
        }
      ],
      formLabelWidth: '120px',
      dialogVisible: false,
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      formInline: {

      },
      temData: [],
      tableData: [],
      eleMaintTaskBaseInfo: {

      },
      flowList: []
    }
  },
  watch: {
    "formInline.startTime" (newVal) {
      if (newVal == null) {
        this.formInline.startTime = ""
      }
    },
    "formInline.endTime" (newVal) {
      if (newVal == null) {
        this.formInline.endTime = ""
      }
    }
  },
  mounted () {
    this.gettableData()
  },
  methods: {

    tableRowClassName({row, rowIndex}) {
      if (row.exceedingOrExpectingDay.includes('逾')) {
        return 'warning-row';
      }
      return '';
    },
    // 获取表格数据
    gettableData () {
      getAdminselectEleMaintTaskPage({
        startTime: this.formInline.startTime,
        endTime: this.formInline.endTime,
        eleCode: this.formInline.eleCode,
        maintType: this.formInline.maintType,
        maintWorker: this.formInline.maintWorker,
        useOrgName: this.formInline.useOrgName,
        isOver:this.formInline.isOver,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
      }).then(res => {
        if (res.data.code == 200) {
          this.taskTotal = res.data.data.taskTotal
          this.useOrgTotal = res.data.data.useOrgTotal
          this.tableData = res.data.data.page.list
          this.pagination.pageTotal = res.data.data.page.total
        }
      })
    },
    onexport () {
      getAdminselectEleMaintTaskPage({
        startTime: this.formInline.startTime,
        endTime: this.formInline.endTime,
        eleCode: this.formInline.eleCode,
        maintType: this.formInline.maintType,
        maintWorker: this.formInline.maintWorker,
        useOrgName: this.formInline.useOrgName,
        isOver:this.formInline.isOver,
        pageNum: 1,
        pageSize: 10000,
      }).then(res => {
          if (res.data.code == 200) {
          let tableData = res.data.data.page.list
          const params = {
            title: ['序号','设备注册代码', '计划名称', '使用单位', '计划维保时间','维保类型','维保负责人', '联系电话',"预/逾期"],
            key: ['index','eleCode', 'planName', 'useOrgName', 'startTime','maintType', 'maintWorker', 'phonenumber', 'exceedingOrExpectingDay'],
            data: tableData, // 数据源
            autoWidth: true, //autoWidth等于true，那么列的宽度会适应那一列最长的值
            filename: '维保工单列表'
          }
          excel.exportArrayToExcel(params)
        }
      })
    },
    showDetail (taskId) {
      this.dialogVisible = true
      getselectEleMaintTaskDetail({
        taskId: taskId
      }).then(res => {
        if (res.data.code == '200') {
          this.eleMaintTaskBaseInfo = res.data.data.eleMaintTaskBaseInfo
          this.flowList = res.data.data.eleMaintTaskWorkflowInfo.flowList
          this.active = this.flowList.length
        }
      })
    },
    // 关闭弹框
    handleClose () {
      this.form = {}
      this.dialogVisible = false
    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
      this.gettableData()
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.gettableData()
    },
    onSubmit () {
      console.log('submit!')
    },
  }
}

</script>
<style>
.el-table .warning-row {
  color: #C03639;
}

</style>
<style lang="less" scoped>

.el-date-editor.el-input {
  width: 190px;
}
::v-deep .el-tabs__nav-wrap {
  padding: 0 20px;
}
.list {
  .el-card {
    .el-form {
      ::v-deep .el-form-item__label {
        font-weight: 800;
      }
      ::v-deep .el-input__inner {
        width: 190px;
      }
    }
  }
  .el-dialog {
    h1 {
      line-height: 50px;
      background: #f9f9f9;
      font-size: 16px;
      font-weight: 800;
      padding-left: 30px;
    }
    .el-form {
      ::v-deep .el-form-item__label {
        font-weight: 800;
      }
      ::v-deep .el-input__inner {
        border: none;
        width: 250px;
      }
      border-bottom: 1px solid #e7eaec;
    }
    .steps {
      padding: 40px 0 20px 0;
      text-align: left;
      ::v-deep .el-step__icon {
        top: -7px;
        width: 40px;
        height: 40px;
      }
      ::v-deep .el-step__title {
        font-size: 14px;
      }
      ::v-deep .el-step__description {
        font-size: 14px;
      }
    }
  }
  .clearfix {
    font-weight: bold;
  }
  .el-pagination {
    margin-top: 2vh;
    text-align: right;
  }

  ::v-deep .el-table .el-table__cell {
    padding: 5px;
  }
}
</style>
